<!-- 导航面包屑 -->
<template>
  <el-icon
    id="icon-expollse"
    style="font-size: 20px; margin-right: 10px"
    @click="AppStore.toggleSidebar"
  >
    <component :is="AppStore.sidebar.opened ? 'Expand' : 'Fold'"></component>
  </el-icon>
  <el-breadcrumb :separator-icon="ArrowRight">
    <el-breadcrumb-item
      v-for="(item, index) in $router.matched"
      :key="index"
      :to="item.path"
      v-show="item.meta.name"
    >
      <el-icon>
        <component :is="item.meta.icon"></component>
      </el-icon>
      <span> {{ item.meta.name }}</span>
    </el-breadcrumb-item>
  </el-breadcrumb>
</template>

<script lang="ts" setup>
import { ArrowRight } from "@element-plus/icons-vue";
import { useRoute } from "vue-router";
import { useAppStore } from "@/store/modules/app";

const AppStore = useAppStore();
const $router = useRoute();
</script>

<style>
#icon-expollse:hover {
  color: skyblue;
  cursor: pointer;
}
</style>
